<template>
	<div class='tabbar'>
		<ul>
			<li
				v-for="(item,index) in routerList"
				:key='index'
				@click='switchTab( item.path )'
			>	
				<img :src="$route.path.includes( item.path ) ? item.selected : item.active" alt="">
				<span :class='$route.path.includes( item.path ) ? "active" : ""'>{{item.title}}</span>
			</li>
		</ul>
	</div>
</template>

<script>
export default{
	data () {
		return {
			routerList:[
				{
					title:'首页',
					path:'/home',
					active:'/images/home.png',
					selected:"/images/home-select.png"
				},
				{
					title:'分类',
					path:'/list',
					active:'/images/list.png',
					selected:"/images/list-select.png"
				},
				{
					title:'购物车',
					path:'/cart',
					active:'/images/cart.png',
					selected:"/images/cart-select.png"
				},
				{
					title:'我的',
					path:'/my',
					active:'/images/my.png',
					selected:"/images/my-select.png"
				}
				
			]
		}
	},
	methods:{
		switchTab( path ){
			//判断是否点击的路由是当前路由
			if( this.$route.path == path ) return;
			//对应跳转路由
			this.$router.push( path );
		}
	}
}
</script>

<style scoped lang="scss">
.tabbar{
	width: 100%;
	height: 1.333333rem;
	ul{
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 1.333333rem;
		li{
			display: flex;
			flex-direction: column;
			text-align: center;
			img{
				width: 0.933333rem;
				height: 0.933333rem;
			}
			span{
				font-size:0.373333rem;
			}
		}
	}
}
.active{
	color:red;
}
</style>